<template>
    <div>
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer" label-width="100px" :label-position="labelPosition">
            <el-form-item prop="username" label="账号：">
                <el-input v-model="loginForm.username" type="text" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item prop="password" label="密码：">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item prop="code" label="验证码：">
                <el-input type="text" v-model="loginForm.code" placeholder="点击图片更换验证码" @keydown.enter.native="fnLogin" class="captcha"/>
                <img :src="captchaUrl" @click="fnUpdateCaptcha" class="captchaImg" style="float: right;width: 82px"/>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="text" @click="changeForget" style="float: right;padding: 10px 10px;font-size: 14px">
                    忘记密码
                </el-button>
                <el-checkbox v-model="checked" style="margin-bottom: 10px;text-align: left;float: right">记住我</el-checkbox>
            </el-form-item>
            <el-button type="primary" style="width: 30%;margin: auto;display: block" @click="fnLogin">登录</el-button>
        </el-form>
<!--        <div v-else>-->
<!--            <forget-password></forget-password>-->
<!--        </div>-->
    </div>
</template>

<script>
    import eventBus from "../../eventBus";
    import {login} from "../../utils/login";
    import {mapState} from "vuex";
    import ForgetPassword from "./forgetPassword";

    export default {
        name: "LoginChild",
        components: {ForgetPassword},
        data() {
            return {
                labelPosition:'right',      //让表格
                captchaUrl: '/timeapi/' + this.$store.state.loginServiceApi + '/captcha?time=' + new Date(),    //文件上传路径
                checked: true,              //复选框
                loginServiceApi: this.$store.state.loginServiceApi, //登录接口前缀
                loginForm: {                //登录数据
                    username: '',
                    password: '',
                    code: '' // 验证码
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            //获取兄弟组件的数据
            eventBus.$on("toLogin",data =>{
                this.loginForm.username = data
            })
        },
        computed:{
        },
        methods: {
            //登录
            fnLogin() {
                this.$refs.loginForm.validate(data => {
                    if (data) {
                        login(this.loginForm, this)
                    }
                })
            },
            //获取验证码
            fnUpdateCaptcha() {
                this.captchaUrl = '/timeapi/' + this.loginServiceApi + '/captcha?time=' + new Date()
            },
            //打开 忘记密码
            changeForget(){
                this.$emit("openForget",true)
            },
        }
    }
</script>

<style scoped>

    .loginTitle[data-v-dd7a443a] {
        /*margin: 0 auto 20px auto;*/
        text-align: center;
    }

    .captcha {
        width: auto;
        margin-right: 10px;
    }

    .captchaImg {
        width: 100px;
    }

    .el-form-item__content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
